/*
 * 重置密码主体组件
 */
<script>
    import ysCountDownBtn from '@/components/base/btn/ys-countdown-btn.vue';
    
    export default 
    {
        components: {
            ysCountDownBtn
        },
        name: "ys-resetpwd-main",
        props: 
        {
          
        },
        data() 
        {
            return {
                mobile : "",
                password : "",
                code: "",
            }
        },
        methods: 
        {
            /*
             * 密码登陆
             * @param    string     user_var    用户标识
             * @param    string     password    用户密码
             * @return void
             */
            resetPassword: function()
            {
                var query = `
                    mutation resetPassword ($mobile: String, $password:String, $code:Int){
                        resetPassword(mobile: $mobile, password: $password, code: $code){
                            error_code
                            error_msg
                        }
                    }            
                `;
                this.graphql.query({query:query, variables: {"mobile" : this.mobile, "password" : this.password,"code" : this.code}}).then(function (res) {
                    console.log(JSON.stringify(res));
                    if (res.resetPassword.error_code == 0) {
                        uni.showToast({
                            title:'重置成功',
                            icon:'success'
                        })
                    } else {
                        uni.showToast({
                            title:res.resetPassword.error_msg,
                            icon:'none'
                        })                        
                    }
                    //do something
                }).catch((error) => {
                    console.log(error);
                });                  
            }
        }
    }
</script>

<template name="ys-resetpwd-main">
    <view class="ys-resetpwd-main">
        <view class="mobile-input input-box">
            <view class="icon"></view>
            <input v-model="mobile" type="number" placeholder="请输入您的手机号" class="mobile"></input>
        </view>
        <view class="password-input input-box">
            <view class="icon"></view>
            <input v-model="password" type="text" password="true" placeholder="请输入密码" class="password"></input>
        </view>
        <view class="code-input input-box">
            <view class="icon"></view>
            <input v-model="code" type="text"  placeholder="请输入验证码" class="code"></input>
            <ysCountDownBtn :mobile="mobile"></ysCountDownBtn>
        </view>        
        <button class="resetpwd-btn big-btn" @tap="resetPassword">重置密码</button>
        <view class="navigator">
            <navigator class="login" url="/pages/login/login">
                <text>返回登录</text>
            </navigator>               
            <navigator class="regist" url="/pages/register/register">
                <text>立即注册</text>
            </navigator>  
        </view>
    </view> 
</template>

<style lang="scss">
    .ys-resetpwd-main {
        display: flex;
        flex-direction: column;
        width: 620upx;
        input {
            width: 100%;
            color: #999999;
            height: 150upx;
        }
        .input-box {
            display: flex;
            align-items: center;
            width: 100%;
            border-bottom: 0.5upx solid #ebebeb;
            .icon {
                width: 30upx;
                height: 48upx;
                margin-right: 30upx;
            }
        }
        .mobile-input {
            .icon {
                background: url("~@/static/images/icons/login-mobile.png") no-repeat;
                background-size: 24upx 38.4upx;
            }
        }
        .password-input {
            .icon {
                background: url("~@/static/images/icons/login-password.png") no-repeat;
                background-size: 24upx 38.4upx;
            }
        }
        .code-input {
            .icon {
                background: url("~@/static/images/icons/register-code.png") no-repeat;
                background-size: 24upx 38.4upx;
            }
        }        
        .resetpwd-btn {
            margin-top: 60upx;
        }
        .navigator {
            display: flex;
            font-size: 0.8em;
            margin-top: 20upx;
            justify-content: space-between;
        }
     }
</style>